<template>
    <inputCom @add="handleAdd"/>
    <listCom :Olist="newData" @del="delFn" @get="getFn" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"/>
</template>
<script setup>
import {ref,computed} from "vue"
import inputCom from "./Input.vue"
import listCom from "./List.vue"
let Olist = ref([
    {
        id:1,
        content:"111",
        isComputed:false,
    },
    {
        id:1,
        content:"222",
        isComputed:false,
        
    }
    
])
console.log(Olist)
let handleAdd =(input)=>{
console.log(input)

let obj = {
    id:Math.random().toString(32).substring(2),
    content:input,
    isComputed:false
}
Olist.value.push(obj)
}
let delFn =(input)=>{
console.log(input)
Olist.value.splice(input,1)
}
let filterFlag = ref("all")
let getFn = (flag)=>{
    filterFlag.value=flag
}
let allCount = ref(0)
let completedCount = ref(0)
let activeCount = ref(0)
let newData = computed(()=>{
    console.log(filterFlag)
    let all = Olist.value
    let completed = Olist.value.filter(item => item.isComputed)
    let active = Olist.value.filter(item => !item.isComputed)
    allCount.value = all.length
    completedCount.value = completed.length
    activeCount.value = active.length
    switch(filterFlag.value){
        case "all":
            return all;
        case "completed":
            return completed;
        case "active":
            return active
    }
})
</script>